<!-- eslint-disable vue/multi-word-component-names -->
<template>

  <div id="all">
    <!-- 第一行 -->
    <div class="one">
      <div class="oneItem">
        <span>{{ curStudent?.username }}</span>
        <span>{{ classFormat[curStudent?.class] }}</span>
        <van-icon name="friends-o" size="27.5" color="#DBD5FF" @click="toggle" />
      </div>
      <div class="twoItem" style="display: flex; align-items: center">
        <van-icon
          name="points"
          size=".7em"
          color="#5D3FDF"
          style="margin-top: 1vh; font-weight: 600"
        />
        <div>&nbsp;{{ thisCount.cont }}</div>
      </div>
    </div>
    <!-- 第二行 -->
    <div class="two">
      <div class="left">
        <span>有效期：</span>
        <span>{{ curStudent?.createtime }}</span>
      </div>
      <div class="right" @click="dataChoice">{{ curMonthStr }}</div>
    </div>

    <!-- 第三行 -->
    <div class="three">
      <van-tabs
        v-model:active="active"
        animated
        line-height="0"
        background="#866DE6"
        title-active-color="#FEE220"
        title-inactive-color="white"
        style="font-weight: 600"
        size="2em"
        @click="toggleWeek(active + 1)"
      >
        <van-tab v-for="index in 4" :title="'第 ' + index + ' 周'" :key="index">
          <!-- 内容 {{ index }} -->
        </van-tab>
      </van-tabs>
    </div>
    <!-- 第四行 -->
    <div class="four">
      <img src="../../assets/img/29.png" alt="" />
      任务列表
      <img src="../../assets/img/29.png" alt="" />
    </div>
    <!-- 第五行 -->
    <van-row justify="center">
      <van-loading type="spinner" color="#ffc456" v-if="loading" />
    </van-row>
    <div>
      <lazy-component>
        <div id="allData" v-for="item in list" :key="item.id">
          <div class="top">
            <div id="one">
              <van-icon name="thumb-circle" size="25px" color="#FFA500" />
              <b style="margin-left: 10px">{{ item.title }}</b>
            </div>
            <div id="two" v-if="item.status == 0">
              <span>{{ item?.integral }}</span
              >积分
            </div>
            <div id="two" v-if="item.status == 1">
              <span>+{{ item?.integral }}</span
              >积分
            </div>
          </div>
          <div>
            <div class="content">{{ item?.content }}</div>
            <div @click="ClockDetail(item)" v-if="item.status == 0">打卡</div>
            <div v-if="item.status == 1" style="filter: grayscale(80%)">已打卡</div>
            <!-- <div v-if="item.status == 2" style="filter: grayscale(80%)">无法打卡</div> -->
          </div>
        </div>
      </lazy-component>
    </div>

    <!-- 日期选择 -->
    <div v-show="ok" class="choiceDate">
      <van-date-picker
        style="border-radius: 1px; width: 90%; margin-left: 5%"
        v-model="currentDate"
        title="选择年月"
        :min-date="new Date(2023, 0, 1)"
        :max-date="new Date(2023, 11, 31)"
        :formatter="formatter"
        :columns-type="columnsType"
        @cancel="cancel"
        @confirm="confirm"
      />
    </div>
  </div>
</template>

<script setup>
import { useIntegrallist } from '@/stores/integralList.js'  // 导入名为useIntegrallist的函数，从'@/stores/integralList.js'文件中
import { useUserInfoStore } from '@/stores/user.js'  // 导入名为useUserInfoStore的函数，从'@/stores/user.js'文件中
import { storeToRefs } from 'pinia'  // 导入storeToRefs函数，从'pinia'库中
import { computed, ref } from 'vue'  // 导入computed和ref函数，从'vue'库中
import { useRouter } from 'vue-router'  // 导入useRouter函数，从'vue-router'库中
import { assignmentIndex } from '../../api'  // 导入assignmentIndex函数，从'../../api'文件中
import { showToast } from 'vant'  // 导入showToast函数，从'vant'库中

const userInfoStore = useUserInfoStore()  // 使用useUserInfoStore函数创建userInfoStore对象
const integrallist = useIntegrallist()  // 使用useIntegrallist函数创建integrallist对象
const { curStudent, classFormat, thisCount } = storeToRefs(userInfoStore)  // 使用storeToRefs函数将userInfoStore对象的curStudent、classFormat和thisCount属性解构为响应式对象
const jobs = ref([])  // 创建一个响应式引用jobs，初始值为一个空数组
const router = useRouter()  // 使用useRouter函数创建router对象
const loading = ref(true)  // 创建一个响应式引用loading，初始值为true

;(async function () {  // 定义一个异步函数并立即调用
  loading.value = true  // 将loading的值设为true
  const res = await assignmentIndex()  // 调用assignmentIndex函数，并将返回结果赋值给res
  jobs.value = res  // 将res赋值给jobs
  list.value = week1.value  // 将week1的值赋值给list
  loading.value = false  // 将loading的值设为false
})()

const list = ref([])  // 创建一个响应式引用list，初始值为一个空数组

function toggleWeek(i) {  // 定义一个名为toggleWeek的函数，接受参数i
  switch (i) {  // 根据参数i进行判断
    case 1:  // 如果i为1
      list.value = week1.value  // 将week1的值赋值给list
      if (!list.value.length) {  // 如果list为空数组
        showToast('暂无打卡')  // 弹出提示框显示'暂无打卡'
      }
      break
    case 2:  // 如果i为2
      list.value = week2.value  // 将week2的值赋值给list
      if (!list.value.length) {  // 如果list为空数组
        showToast('暂无打卡')  // 弹出提示框显示'暂无打卡'
      }
      break
    case 3:  // 如果i为3
      list.value = week3.value  // 将week3的值赋值给list
      if (!list.value.length) {  // 如果list为空数组
        showToast('暂无打卡')  // 弹出提示框显示'暂无打卡'
      }
      break
    case 4:  // 如果i为4
      list.value = week4.value  // 将week4的值赋值给list
      if (!list.value.length) {  // 如果list为空数组
        showToast('暂无打卡')  // 弹出提示框显示'暂无打卡'
      }
      break
    default:
  }
}

let date = new Date()  // 创建一个Date对象实例date，表示当前日期和时间
let key = `${date.getFullYear()}-0${date.getMonth() + 1}`  // 格式化当前月份的字符串键值
const curMonthStr = ref(date.getMonth() + 1 + '月')  // 创建一个响应式引用curMonthStr，初始值为当前月份+1的字符串加上'月'
const curKey = ref(key)  // 创建一个响应式引用curKey，初始值为key

const curMonth = computed(() => {  // 创建一个计算属性curMonth，根据curKey和jobs的值来计算
  return jobs.value[curKey.value]
})
const week1 = computed(() => curMonth?.value?.slice(0, 7) ? curMonth?.value?.slice(0, 7) : [])  // 创建一个计算属性week1，根据curMonth的值来计算，如果curMonth不为null或undefined，则截取数组前7个元素，否则返回空数组
const week2 = computed(() => curMonth?.value?.slice(7, 14) ? curMonth?.value?.slice(7, 14) : [])  // 创建一个计算属性week2，根据curMonth的值来计算，如果curMonth不为null或undefined，则截取数组第8个到第14个元素，否则返回空数组
const week3 = computed(() => curMonth?.value?.slice(14, 21) ? curMonth?.value?.slice(14, 21) : [])  // 创建一个计算属性week3，根据curMonth的值来计算，如果curMonth不为null或undefined，则截取数组第15个到第21个元素，否则返回空数组
const week4 = computed(() => curMonth?.value?.slice(21, curMonth.value.length) ? curMonth?.value?.slice(21, curMonth.value.length) : [])  // 创建一个计算属性week4，根据curMonth的值来计算，如果curMonth不为null或undefined，则截取数组第22个到最后一个元素，否则返回空数组

// 日期选择-----------------------------------
const ok = ref(false)  // 创建一个响应式引用ok，初始值为false
const dataChoice = () => {  // 定义一个名为dataChoice的函数
  ok.value = true  // 将ok的值设为true
}

// 取消逻辑
const cancel = () => {  // 定义一个名为cancel的函数
  ok.value = false  // 将ok的值设为false
}

// 确认逻辑
const active = ref(0)  // 创建一个响应式引用active，初始值为0
const confirm = () => {  // 定义一个名为confirm的函数，接受参数e
  let key = currentDate.value.join('-')  // 将currentDate数组的元素以'-'连接为字符串，并赋值给key
  curMonthStr.value = Number(currentDate.value[1]) + '月'  // 将currentDate数组的第2个元素转换为数字并加上'月'，赋值给curMonthStr
  curKey.value = key  // 将key赋值给curKey
  toggleWeek(1)  // 调用toggleWeek函数，传入参数1
  active.value = 0  // 将active的值设为0
  ok.value = false  // 将ok的值设为false
}

const currentDate = ref(['2023', '08'])  // 创建一个响应式引用currentDate，初始值为包含两个元素的数组['2023', '08']
const columnsType = ['year', 'month']  // 创建一个包含两个元素的数组columnsType，元素分别为'year'和'month'

const formatter = (type, option) => {  // 定义一个名为formatter的函数，接受两个参数type和option
  if (type === 'year') {  // 如果type为'year'
    option.text += '年'  // 将option的text属性末尾添加'年'
  }
  if (type === 'month') {  // 如果type为'month'
    option.text += '月'  // 将option的text属性末尾添加'月'
  }
  return option  // 返回option
}
// -------------------------------------------------

function toggle() {  // 定义一个名为toggle的函数
  router.push('/StudentProfile')  // 跳转到'/StudentProfile'路径
}

//我的收藏
async function ClockDetail(item) {  // 定义一个名为ClockDetail的异步函数，接受参数item
  integrallist.getCurClock(item)  // 调用integrallist对象的getCurClock方法，传入item
  router.push({ path: '/clockDetail' })  // 跳转到'/clockDetail'路径
}

</script>

<style scoped lang="less">
@var1: #8878fe;
@var2: #5d3fdf;
@var3: #4ec183;
@var4: #ffffff;
@var5: #ffbf00;
@var6: #b5b5b5;
@var7: #6654ff;

.one,
.two {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1vh;
}
#all {
  padding: 2vh 5vw;
  background-color: @var1;
  position: relative;
  height: 100%;
  min-height: 100vh;
  background: -webkit-linear-gradient(
    50deg,
    rgb(254, 243, 239) 0%,
    #e6d4b5 10%,
    @var1 65%,
    #9786ff,
    #8875ff
  );
}
.twoItem {
  font-size: 1.5em;
  font-weight: 900;
  color: @var2;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.oneItem > span:first-child {
  color: white;
  font-size: 18px;
  font-weight: 900;
}
.oneItem > span:nth-child(2) {
  color: white;
  background-color: @var3;
  margin: 0% 4vw;
  font-size: 13px;
  font-weight: 600;
  padding: 0.5vh 2vw;
  border-radius: 15px;
}
.left {
  color: white;
  font-size: 15px;
}
.right {
  color: white;
  font-size: 20px;
  font-weight: 600;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  &::after {
    content: '▼';
    font-size: 13px;
  }
}
.choiceDate {
  background-color: rgba(34, 36, 36, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100vw;
  padding-top: 20vh;
}
:global(.van-tabs__nav--line) {
  border-radius: 5px;
}
.four {
  text-align: center;
  margin: 2vh 0;
  font-size: 18px;
  font-weight: 900;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva,
    Verdana, sans-serif;
}
.three {
  padding-top: 1vh;
}
.top {
  display: flex;
  justify-content: space-between;
  width: 96%;
  margin-left: 2%;
  padding: 1.5vh 0;
}
#allData {
  .content {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    -webkit-box-orient: vertical;
  }
  background-color: #ffffff;
  border-radius: 10px;
  margin-top: 2vh;
  padding-bottom: 1rem;
  & > div:last-child {
    display: flex;
    justify-content: space-between;
    width: 94%;
    margin-left: 3%;

    > div:last-child {
      color: white;
      background-color: #ffbf00;
      font-size: 14px;
      padding: 0.5vh 3vw;
      height: 3vh;
      line-height: 2vh;
      border-radius: 15px;
      margin: auto 0;
      // margin-top: 2vh;
    }
    > div:first-child {
      margin-left: 30px;
      color: #b5b5b5;
      font-weight: 900;
      // padding-bottom: 2vh;
      font-size: 15px;
      width: 50%;
    }
  }
}
#two {
  color: #6654ff;
  font-weight: 900;
  font-size: 15px;
}
</style>
